window.addEventListener('load', function() {
  var log = console.log || window.console.log;
  var $ = document.querySelector.bind(document);

  var box = $('.box');
  var box1 = $('.box1');
  var bar = $('.bar');
  var bar1 = $('.bar1');
  box1.ontouchstart = function(e) {
    e.preventDefault();
    var touch = e.touches[0];
    var ex = touch.clientX;
    var bl = box1.offsetLeft;
    var bo = bar1.offsetLeft;
    box1.ontouchmove = function(e) {
      var touch = e.touches[0];
      if(bl + touch.clientX - ex >= 0) {
        box1.style.left = 0;
        bar1.style.left = 0;
      } else if(bl + touch.clientX - ex <= box.offsetWidth - box1.offsetWidth) {
        box1.style.left = box.offsetWidth - box1.offsetWidth + 'px';
        bar1.style.left = bar.offsetWidth - bar1.offsetWidth + 'px';
      } else {
        box1.style.left = bl + touch.clientX - ex + 'px';
        bar1.style.left = bo + (bar.offsetWidth - bar1.offsetWidth)*(touch.clientX - ex)/(box.offsetWidth - box1.offsetWidth) + 'px';
      }
    }
    document.ontouchend = function(e) {
      box1.ontouchmove = null;
    }
  }

})